<template>
  <div class="mall-container">
    <!-- 搜索和分类区域 -->
    <el-card class="search-area">
      <el-row :gutter="20" type="flex" justify="space-between" align="middle">
        <el-col :span="16">
          <el-input
            v-model="queryParams.keyword"
            placeholder="搜索商品"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-select v-model="queryParams.categoryId" placeholder="选择分类" clearable>
            <el-option
              v-for="item in categories"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
            />
          </el-select>
        </el-col>
      </el-row>
    </el-card>

    <!-- 商品列表 -->
    <el-row :gutter="20" class="product-list">
      <el-col v-for="product in productList" :key="product.productId" :span="6">
        <el-card 
          shadow="hover" 
          class="product-item"
          @click="viewDetail(product.productId)"
        >
          <img :src="baseUrl + product.mainImage" class="product-image">
          <div class="product-info">
            <h3 class="product-title">{{ product.productName }}</h3>
            <p class="product-desc">{{ product.ichElements }}</p>
            <div class="product-price">
              <span class="price">¥{{ product.price }}</span>
              <el-button type="primary" size="small" @click.stop="addToCart(product)">
                加入购物车
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[12, 24, 36, 48]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { listProduct } from '@/api/ich/product'
import { listCategory } from '@/api/ich/category'

const router = useRouter()
const loading = ref(false)
const total = ref(0)
const productList = ref([])
const categories = ref([])
const baseUrl = import.meta.env.VITE_APP_BASE_API

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 12,
  keyword: undefined,
  categoryId: undefined
})

// 获取商品列表
const getList = async () => {
  loading.value = true
  try {
    const res = await listProduct(queryParams.value)
    productList.value = res.rows
    total.value = res.total
  } catch (error) {
    console.error('获取商品列表失败:', error)
    ElMessage.error('获取商品列表失败')
  } finally {
    loading.value = false
  }
}

// 获取分类列表
const getCategories = async () => {
  try {
    const res = await listCategory()
    categories.value = res.rows
  } catch (error) {
    console.error('获取分类失败:', error)
    ElMessage.error('获取分类失败')
  }
}

// 查看商品详情
const viewDetail = (productId) => {
  router.push(`/user/mall/detail/${productId}`)
}

// 加入购物车
const addToCart = (product) => {
  ElMessage.success('已加入购物车')
}

// 搜索按钮操作
const handleSearch = () => {
  queryParams.value.pageNum = 1
  getList()
}

// 分页大小改变
const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  getList()
}

// 页码改变
const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  getList()
}

onMounted(() => {
  getCategories()
  getList()
})
</script>

<style lang="scss" scoped>
.mall-container {
  padding: 20px;

  .search-area {
    margin-bottom: 20px;
  }

  .product-list {
    margin-bottom: 20px;

    .product-item {
      margin-bottom: 20px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
      }

      .product-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 4px;
      }

      .product-info {
        padding: 10px 0;

        .product-title {
          margin: 0 0 5px;
          font-size: 16px;
          font-weight: bold;
          color: #303133;
        }

        .product-desc {
          margin: 0 0 10px;
          font-size: 14px;
          color: #909399;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .product-price {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .price {
            font-size: 18px;
            color: #f56c6c;
            font-weight: bold;
          }
        }
      }
    }
  }

  .pagination-container {
    text-align: center;
    margin-top: 20px;
  }
}
</style> 